HTML: 

Client: The desktop computer requesting for information is 

termed as the client. 

Server: The computer serving information from a central 

location is termed as server. 

Web pages: Files that travel across the largest n/w in the world, 

the internet and carry information from a server to a client that 

requested them are called webpages. The individual who 

develops these web pages is called Developer. 

Web server: Web pages are created using HTML syntax. 

These pages must be organized and stored at a central 

computer. The organization of web pages into directories and 

files stored on HDD of a central computer is called website 

creation. Computer which store web pages in the form of 

directories and files and provide these to be read, are called 

server. 

Wave client or browser: Computer that offer the facility to 
read information stored in WebPages are called clients and the 
software used for client is called browser. 

How a Browser communicates with a web server: 




Browser 
client 



web server 

Fig. Communication between client and server. 

1. Established connection: 

Before a client and server can exchange information they must 
first established a connection. TCP/IP is used let computers 
established a link between a web server and web browser over 
the internet. To communicate with web server , the client 
machine must be given IP address of the server with the sub 
protocol that must be used i.e HTTP, FTP etc. 

2. Client issues a request and server sends a response.: 

When a browser connects to a webserver using an appropriate 
protocol name, IP address and port number and the web server 
treats this connection to be a request for the defult web 
document. The webserver then dispatches the default web 
document to the client who connected. If the client requires 
viewing any other web page then the client can specify the web 
page name along with the connection information. If the web 
page is not found an appropriate error message is send as a 
response. 



Syntax: 

Protocol: // server name: port number /web pages name. 

3. Server Terminates the connection: Server terminates the 
TCP/IP connection with the browser after it responds to the 
browser's request. If the user clicks on the browser stop bottom, 
the browser must close the connection. 

HTML (Hyper Text markup language): The language used to 

develop web page is called HTML and is interpreted by a 

browser . 

HTML Tag: Tags are instruction that are embedded directly 

into the text of the document. HTML tags begin with an open 

angle bracket(<) and end with a close angle bracket(>). 

Paired tags: A tag is said to be a paired tag if it, along with a 

companion tag, flanks the text with its companion text e.g <B> 

tag is paired tag. The <B> tag with its companion tag </B> 

causes the text contained between them to be bold.. <B> is 

called opening tag and </B> is called closing tag. 

Singular tag: A stand-alone or singular tag does not have a 

companion tag. Eg <br> tag will insert a line break. This has no 

any companion tag. 

Structure of HTML program: 

<HTML> 

<HEAD> 

<TITLE> 

</TITLE> 



</HEAD> 
<BODY> 



</BODY> 

</HTML> 



The entire webpage is enclosed within <HTML> tags within 
these two tags two distinct sections are created using the 
<HEAD></HEAD> and <BODY></BODY> tags. 

Information placed in head section is essential to the inner 
working of the document and has noting to do with the content 
of document. The information placed within the <HEAD> 
</HEAD> tags is not displayed in the browser. The information 
written within the <BODY> </BODY> is displayed in the 
browser. Background color, text color , font size etc can be 
specified as attributes of <BODY> tag. 

Text Formatting: 

<p> : used for paragraphs on encountering this tag, the browser 

moves onto a new line skipping one line between the previous 

line and the new line. 

<BR> : line break start from a new line and not continue on the 

same line. 

Heading styles: HTML supports 6 different levels of headings. 

The highest-level is <H1> . The size varies form <H1> to 

<H6>. 

Eg. <H3> EASCOLL </H3> 



<HR> tag: This tag draws a horizontal line across the whole 

page, whenever specified. These attributes are: 

Align: Align the line on the browser screen which is by 

default, aligned to the center of the screen. 

Align = left 

Align = right 

Align= center 



E.g 

<FONT FACE= "Comic Sans Ms" size 
Welcome to EASCOLL </FONT> 

Setting background color: 

Bgcolor = "Name of the color" 
<body bgcolor ="RED"> 



6 color = RED> 



Size: Changes the size of the rule. 

Width: Sets the width of the rule. 

Eg. <HR> align = left width =10 size =4> 

<I> tag: This tag displays text in Italics. 
Eg. <I> EASCOLL </I> 

<U> tag: This tag displays text as underlined. And is used as 

<U>....</U> 

Eg. <U> EASCOLL </U> 

<Center> tag: This tag is used to center everything found 

between <center> </center> tag like text, list, images, tables 

or any other page element. 

Eg. <center> welcome to EASCALL </center> 

<FONT> tag: All text specified within the tags <FONT> and 

</FONT> will appear in the font, sizes and color as specified as 

attributes of the tag <FONT>. The attributes are: 

FACE: Sets the font to the specified font name. 

SIZE: Sets the size of the text and value is between 1 to 7. 

Color: Sets the color of the text. 



</body> 

Lists: 

Type: 

1. Unordered list(bullets): An unordered list starts with 
the tag <UL> and ends with </UL>. Each list item starts 
with the tag <LI>. The attributes are specified within 
<UL> tag. 

Attributes: 
Type: Specifies the type of the bullet. 

Type= Fillround(solid round block) 
Type= Square (solid square black bullet) 
Eg: <UL type= Fillround> 
<LI>B.E computer 
<LI> B.E civil 
<LI> B.E Elx. & com. 
</UL> 

2. Ordered lists (Numbering): An ordered list start with 
the tag <OL> and ends with </OL>. Each list item starts 



with tag <LI>. The attributes that can be specified within 

<LI> are: 

Type: Controls the numbering scheme. 
Type= " 1 " (count number 1 ,2 . . . .) 
Type= "A" ( give uppercase letters A,B,. . .) 
Type= "a" (give lowercase letters a,b,c....) 
Type= "I" (give uppercase Roman letter 1,11,..) 
Type= "i" (give lowercase Roman letter i, ii. . .) 

Start: Sets any numeric value. 

Eg.: <OL type = "1" start = 5> 
<LI> Apple 
<LI>Ball 
<LI> cat 
</OL> 



Output: 



5. Apple 

6. Ball 

7. Cat 



Definition List: Definition list appears within tags <DL> and 
</DL> . It consists of two parts: 

- Definition terms: appears after tag <DT> 

- Definition description : appears after the tag <DD> 
Eg. <DL> 

<DT> Microsoft excel 

<DD> A spread sheet program 

<DT> Microsoft word 
< DD> A word processing program 
</DL> 
Output: Microsoft excel: 



A spread sheet program 
Microsoft word 

A word processing program. 

Q. Practice the following condition. 
1. B.E computer 

• 1 st year 

• 2 nd year 

3rd 
year 

• 4 th year 
2.B.E Elx. And comp. 

• 1 st year 

• 2 nd year 

3rd 
year 

• 4 th year 
3. B.E Civil 

♦ 1 st year 

♦ 2 nd year 

3rd 
year 

♦ 4 th year 

Adding graphics to HTML Document: 

HTML allows static and animated images in an HTML page. It 
accepts two picture file formats .gif and .jpg . Image can be 
inserted into a web page using the tag <IMG>, along with the 
name of the image file (filename. Gif or file name.jpg or 
file.jpeg). The attributes of the tag <IMG> are: 
Align: TOP: indicates the text after the image to be written at 
the top, next to the image. 



Align= Middle: indicates the text after the image to be written 

at the middle, next to the image. 

Align = center 

Align= Right 

Border: Specifies the size of the border of image. 

Width: Specifies the width of the image. 

Height: Specifies the width of the image. 

Hspace: indicates the amount of space to the left and right of 

the screen. 

Vspace: amount of the space to the top and bottom of the 

image. 

Alt: Displays the text incase the browser each unable to display 

the image specified in the SRC attribute. 

Eg. <IMG width = 400 height = 50 Border^ Hspace=0 SRC 

= "Image.gif align = center> 

Eg 
<HTML> 

<head><title> </title></head> 

<body> 

<B> way for inserting image</B> 

<center> 

<I> Image without using attributes</I> 

<Image SRC ="imagel.gif'xBR> 

<I>Image using attributes</I> 

<Image border=3 height=200 width=200 

SRC= ' ' image 1 /computer, gif ' ' > 

</center> 

</body> 

</html> 



Using ALT attributes 

<Body> 

<B>use of ALT attribute</B> 

<center> Available image : imagel.gif 

<Img src = "computer/image l.gif><br><br> 

Unavailable image: image2.gif 

<I> without alt attribute </I> 

<br><br> 

<I> with alt attribute </I> 

<img src = " computer/image2.gif alt = "image"><br> 

</body> 

</html> 

Output: 

- display image 

- don't display image & attribute image. 

- Don't display image but display attribute image & 
attribute. 

Tables: 

A table is a two dimensional matrix consisting of rows and 
columns. All table related tags are included between the <table 
> and </table> tags. Each row of a table is described between 

the <TR> . . . </TR> tags and column between <TD> </TD> 

tags. 

Rows can be of two types. 
1. Header rows: 



It is defined using <TH> </TH> tags. The content of a 
table header row is automatically centered and appear in 
boldface. 



Align= top: Place the caption above the table. 



2. Data rows: 

Data cell placed in the horizontal plane creates a data row. Data 
cell hold data that must be displayed in the table. It is defined 
using <TR> </TR> tags. 

Attributes included in the <table> tag are: 
Align: Indicates horizontal alignment. It can be set to left , 
center or right . 

Valign: Indicates vertical alignment. It can be set to top, middle 
or bottom. 

Width: Sets the width to a specific no. of pixels. If width is not 
specified , the data cell adjusted based on cell data value. 
Border: Indicates the border thickness of the table. 
Cellpadding: Specifies the distance between the data in a cell 
and the boundaries of the cell. 

Cellspacing: Controls the spacing between adjacent cells. 
Colspan: This attributes is used inside <TH> or <TD> tag. This 
attribute is useful when one row of the table needs to be a 
certain number of columns wide. 

Rowspan: This attribute is useful when one column needs 
certain no. of rows. 

Caption Tag: 

Table heading are called captions. It is written as <caption> 
</caption>. This paired tag appears within the <table> </table> 
tags. It's attributes are : 
Align: Align= bottom : Place the caption below the table. 



Date: 2065/11/16 



Example of table: 

# Program using width and border. 

<HTML> 

<head> 

<title>The table attributes</title> 

</head> 

<body> 

<br> 

<center> 

<table border=5 width=50%> 

<caption align=bottom> 

<B>personal Information </B> 

</caption> 

<TR> 

<TH>Name</TH> 

<TH>Age</TH> 

</TR> 

<TR align=center> 

<TD> Ram </TD> 

<TD>25</TD> 

</TR> 

<TR align=center> 

<td>Shyam</td> 



<td>24</td> 






</body> 


<tr> 






</html> 


</table> 








</center> 






For cell spacing attribute: 


</body> 






<html> 


</HTML> 






<body> 


// Cellpadding attribute: 






<center> 


<HTML> 






<table border=2 cellspacing =10 width = 50% align = c 


<head> 








<title>Cellpadding </title> 






Same as above. 


</head> 








<body bgcolor = cyan > 






// Using bgcolor attribute 


<B> Specifying Cell_padding 


</B> 




<html> 


<center> 






<head><title>bgcolor attributes </title></head> 


<table border=2 width = 50% cellpadding : 


=10 align=center> 


<body bgcolor = lightgrey> 


<tr> 






<center> 


<th>Name</th> 






<table border =2 width=50% align=center> 


<th>Age</th> 






<tr> 


</tr> 






<th bgcolor=grey>Name </th> 


<tr align = center> 






<th bgcolor=grey>Age </th> 


<td> Ram </td> 






</tr> 


<td>25</td> 






<tr align= center> 


</tr> 






<td bgcolor =black><Font color =white> 


<tr align =center> 






Ram</font></td> 


<td>Shyam</td> 






<td bgcolor=violet><Font color =Red>25</font></td> 


<td>24</td> 






</tr> 


</tr> 






<tr align=center> 


</table> 






<td bgcolor=brue><font color =white> 


</center> 






Shyam</font></td> 



center> 



<td bgcolor = redxfont color=blue>24</font></td> 


</tr> 




<caption align =bottom> 




<br><b>personal Information </b> 


</caption> 




</center> 




</body> 




</html> 
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Personal Information 



// Using colspan & Rowspan attributes. 

<html> 

<head><title>Purwanchal University </title></head> 

<body bgcolor =cyan> 

<center> 

<table border=2 width=50% align=center> 

<tr> 

<th rowsapn=2>Name</th> 

<th colspan =3>Marks</th> 

</tr> 

<tr> 

<th>Math 

<th>Computer 

<th>physics 



</tr> 

<tr aling= center> 

<td>Ram 

<td>45 

<td>47 

<td>49 

</tr> 

<tr align= center> 

<td>Shyam 

<td>27 

<td>49 

<td>35 

</tr> 

<Caption align =bottom> 

<br><b>Mark sheet </b> 

</caption> 

</table> 

</center> 

</body> 

</html> 



Row 
span 



Col span 



t 


Name 


Marks 


1 


Math 


Computer 


Physics 




Ram 


45 


47 


49 




Shyam 


27 


49 


35 



Mark Sheet 



Linking Documents: 



Links: THML allows linking to other html documents as well 

as images. Clicking on a section of text or on image in one web 

page will open an entire web page or an image. The text or an 

image that provides such linkages is called hypertext, a 

hyperlink or a hotspot. 

The browser distinguishes hyperlinks from normal text. Every 

hyperlink, 

- Appears blue in color (by default but can be changed by 
html program). 

- The hyperlink text/image is underlined. 

- When the mouse is placed over it, the mouse cursor 
changes to the shape of a hand. 

Links are crated in a web page by using the <A> </A> tags. 

Any things written between the <A> </A> tags becomes a 

hyperlink/hotspot. The document to be navigated, needs to be 

specified. By using HREF attribute of the <A> tag the next web 

page or image can be specified. 

Syntax. 

<A href = "filename. htm"> 

Hyperlinks can be of two types. 

1. External Document References. 

2. Internal Document References. 

External document references: 

Eg. < A href = "details. htm"> Purwanchal University </A> 
Here purwanchal University becomes a hyperlink & links to 
another document, details.htm. Which is present in the current 



working directory. If the file is not present in the current 
directory, a relative or absolute path can be specified. 

Anchors: 

By default a hyperlink takes a users to the beginning of the 
new web page. It might be necessary to jump to a particular 
location within the new web page. To enable a jump to a 
specific location on a web page, anchors can be set up. Anchors 
target hyperlink a specific location point on a web page. It is 
summarized in two steps. 

Step:l 

Mark the location to be jumped to. 

Syntax: 

<A Name = "location_name"> 

Eg. 

<Aname="Pointl"> 

Here, location to be jumped is pointl. 

Step:2 

While jumping to a specific web page & a specific location on 

the web page, we require page name along with the name of the 

location to be jumped on that page. 

Syntax: 

<A href = "file_name.htm# location_name"> 

Eg. 

<A href = "details. htm#pointl"> Purbanchal University </A> 

Internal Document references: 



This is used when a jump is required to a different location in 
the same document. To perform the link we again follow two 
steps. First identify a location with a name & then jump to that 
location using the name. 
Syntax: 

< A Name = "location_name"> 

<A href = "#location_name"> </A> 

Here the absence of filename.htm before the #symbol indicates 
a jump is required within the same document. 

E.g 

<A name= "point 1"> 
<A href = "#pointl">purbanchal University </A> 

Examples: 

II hyper linking to a HTML file. 

< html> 

<head><title>Hyperlink</title></head> 
<body bgcolor = "cyan"> 
<center><Hl> Purbanchal University </Hl> 

<br> <img width = 400 height = 50 src = "college.gif '> 

</center> 

<HR> 

<H4> PU provides the following courses for undergraduate 

program:</H4> 

<UL> 

<LI> <A href = "Computer.htm"> B.E computer </A> 

<LI> <A href = Electronics. htm">B.E Elex & Comm. </A> 

<LI> <A href = "civil.htm">B.E civil </A> 

<LI> <A href = "BCA.htm"> BCA </A> 



<LI> <Ahref="BIT.htm">BIT</A> 

<LI> <A href = " Architecture. htm' '> B. Arch </A> 

</UL> 

<Spacer size = 275 > click for more details! 

</body> 

</html> 

[Note: Save it as index.htm ] 



Code for Computer.htm 

<html> 

<body background^ "University.gif '> 

<Marquee> Purwanchal University </marquee> 

<Center> We cover following Subject in B.E computer for 

different semester. </center> 

<br> 

<ol> 

<li> 1 st Semester </li> 

<ul> 

<li> C programming </li> 

<li> Math- 1 </li> 

<li>Engg. Drawing</li> 

<li> Workshop Technology </li> 

<li>Physics </li> 

<li>Computer concept </li> 

<li>Communication Technique </li> 

</ul> 

<li> 2 nd Semester </li> 



<ul> 

<li>Object oriented programming </li> 

<li>Maths II </li> 

<li> Applied Mechanics </li> 

<li>Chemistry</li> 

<li>Electrical Material </li> 

</ul> 



th 



Continue yourself till 8 semester 



</body> 
</html> 

Linking particular Location in a separate document: 

Code for index2.htm 
<html> 

<body bgcolor = "cyan"> 
<centre> 

<hl><Marquee>Purwanchal University </marquee></hl> 
</centre> 
<ul> 

<li><A href = "Stream.htm#Computer">BE computer</A> 
<li>< a href = "Stream.htm#Elx&com">BE Elx & com </a> 
<li><a href = "stream.htm#Architecture">B.Arch </a> 
<li><a href= "stream.htm#BCA"> BCA </a> 
<li><a href = "steam.htm#BIT"> BIT</a> 
</ul> 
</body> 
</html> 



Code for stream.htm: 

<html> 

<body bgcolor = "cyan"> 

<a name= "computer"> 

<h2> B.E computer syllabus </h2></a> 

<ol> 

<li> First semester 

<ul> 

<li>C-programming 

<li>Math 

<li>Communication Technique 

<li>physics 

<li>Computer concept. 



>th 



Similarly repeat upto 8 semester. 

</ol> 

<A Name = "Elx & comm."> 

<h2>B.E elx & communication Syllabus </h2></a> 

<ol> 

<li>First semester 

<ul> 

<li>C-programming. 

<li> 



</ul> 
<ul> 



</ul> 



<li>7 th semester 
<li>Web- Technology. 
<li>Antenna 
<li> Org. & Mgmt. 
<li> Elective I. 



</ul> 

>th 



<li>8 semester 

Image as hyperlinks: 

An image can be made a hotspot by enclosing an <IMG> tag 
within <A> </A> tags. The <IMG> tag places the image on the 
screen, & because the <IMG> tag is enclosed within the <A> 
</A> tags , becomes a hotspot. 
Syntax: 

<A href = "filename. htm"><img src = "imgname.gif ')</A> 
Here the picture imagename acts as hotspot and navigates to a 
file filename.htm. 

Image Maps: 

When a hyperlink is created on an image, clicking on any part 
of the image will lead to opening of the document specified in 
the <A href . . .> tag. In order to link multiple documents to the 
same image, the image is divided into multiple sections and 
allows lining of each section to a different document. This 
technique is called image maps. Image maps can be created and 
applied to an image so that specific portion of image can ve 
linked to a different file/image. 

Creating an image map is in two-step process. 



Step:l 

Create an image map i.e divide the image into various areas. 
This is done using the <MAP></MAP> tags. 
Syntax: 

<MAP NAME = "map name"> 

Within the <MAP> </MAP> tags the <AREA> tag is specified. 
This tag defines specified. This tag defines spcife rgion and 
take the attributes: 

Shape: The shape of a region can be rect, circle, polygon, 
default. 
Coords: Defines the coordinates to different shapes. 

Rectangle - xl,yl,x2,y2. 

Circle- centerx,centery, radius. 

Poygon- 3 or more pairs of coordinates. 

Default- no coordinate is specified. 

Takes the name of the .htm file that is linked to the 

particular area on the image. 



Href: 




Here clicking on yes will display information about PU and NO 
could lead back to a start page. Area on the image displays the 
buttons 'yes' and 'No' need to be mapped to two different 
HTML files. The area are in xl,yl,x2,y2 coordinates. 

Eg. 
<MAP name= "PU_map"> 



<Area Shape = "rect" Coords= "52,65,122,83" href "PU.htm"> 
<Area Shape= "rect" Coords = "148,65,217,89" href = 
"no.htm> 
Step: 2 

Deals with applying the image to the particular image. For this, 
the <IMG> the takes an attribute called USEMAP that takes the 
name of the image map as value. This value is proceded with # 
sign. 
Syntax: 
<img Usemap= "*#map_name"> 

Eg. 
<img src = PU.gif "usemap = "# pu_map"> 

Eg. 





Purwanchal university 
This 








wish to visit the site 
for stream run under 








yes 




No 











Purwanchal university 

Following are the syllabus for 
undergraduate program: 

1. B.E Comp. 

2. B.E Elx & Comm. 

3. B.E Civil 

4. B.E Arch 

5. BCA 

6. BIT 



you are missing out on a valuable 
info ! 



Thank you ! ! ! 



Code for PU: 



<HTML> 

<head> <title> </title></head> 

<body bgcolor = "cyan"> 

<map name = "Alert_map"> 

<Area. shape = "Rect" coords = "102,74,164,94" href 

"strem.htm"> 

<area shape = "rect coords = "209, 74,272,96" href 

"missing.htm"> 

</map> 

<h2> Purwanchal Univeristy </h2> 

<p>This 

<br> 

<center> 

<img src = "alert.gi" Use map = "#alert_map"> 

</center> 

</body> 

</html> 

Code for stream.htm: 
<html> 

<head><title> </title></head> 

<body> 

<h2> Streams run by PU </h2> 

<br> <i> which stream do you want to visit? 

<br> 

<ul> 

<li> <a href = "comp.htm">B.E comp </a> 

<li> <a href = "Elx and comm.htm">B.E Elx and comm. </a> 

<li><a href = "civil.htm">B.E Civil </a> 



</ul> 

</body> 

</html> 

Code for missing.htm: 

<html> 

<head><title> </title></head> 

<body> 

<h2> you are missing out on valuable information! </h2> 

<br><i> Good Day!! 

</body> 

</html> 

Q. Create an HTML web page that provides an information 
about undergraduate programme syllabus of purwanchal 
university. Clicking on 'yes' will display the required 
information. Clicking on 'NO' displays another HTML files. 





Purwanchal university 

This University offers several 
under graduate programs: 








Do you 


want to view the syllabus? 






yes 




No 











Clicking on yes will display: 



Clicking on No will display: 



Purwanchal university 

Following are the syllabus for 
undergraduate program: 

1. B.E Comp. 

2. B.E Elx & Comm. 

3. B.E Civil 

4. B.E Arch 

5. BCA 

6. BIT 



you are missing out on a valuable 
info ! 



Thank you ! ! ! 



Code for PU.htm: 

<html> 

<head><title>Purwanchal University </title></head> 

<body> 

<MAP name= "Alert_Map"> 

<Area shape = "Rect" coords = "102,74,164,94" href 

"syllabus.htm"> 

<Area shape = "Rect" coords = "209,74,272,96" href 

"missing.htm"> 

</map> 

<hl>purwanchal university </hl> 

<br><br> 

<p> This university offers several undergraduate programs. 

<centre> 

<IMG src = "alert.gif useMap = "#Alert_map"> 

</center> 

</body> 

</html> 



Code for syllabus: 

<html> 

<head><title>Syllabus</title></head> 

<body> 

<hl>purwanchal University<hl> 

<br><p>Following are the syllabus for undergraduate 

programs. 

<ol> 

<li>< A href = "Computer.htm">B.E computer </A> 

<li><a href = " E&C.htm">B.E Elx &comm. </a> 

<li><a href = "civil.htm">B.E civil</a> 

<li><a href = "Architecture.htm">B.Arch</a> 

<li><a href = "BCA.htm">BCA</a> 

<li><a href = BIT.htm">BIT</a> 

</ol> 

</body> 

</html> 

Code for missing.htm: 

<html> 

<head><title>Missing</title></head> 

<body> 

<br><br><br><br> 

<center> 

<h2>You are missing out a valuable information ! ! ! <h2> 

</center> 

</body> 

</html> 



Frames: 

The HTML tags that divides a browser screen into two or more 
HTML recognizable unique regions is the 
<Frameset></Frameset> tags. Each unique region is called a 
frame. Each frame can be loaded with a different document and 
hence, allow multiple HTML documents to be seen 
concurrently. The <Frameset> & </Frameset> tags are 
embedded into the HTML document. This tags require one of 
the following two attributes. 

ROWS: 

This attributes is used to divide the screen into multiple rows. 
Depending on the required size of each row value can be 

- No of pixels 

- Expressed as percentage on the screen resolution. 

- The symbol *, indicating the remaining space. 

Cols: This attribute is used to divide the screen into multiple 
columns. 

e-g 

<frameset rows = "33%, 33%, 33%> 

- Divide the browser screen into 3 equal horizontal section. 

<Frameset cols = "50%,50%"> - Splits the 1 st horizontal 

section into 2 equal vertical sections. 

</frameset> 

<frameset cols = "50%,50%"> - Splits the 2 nd horizontal section 

into 2 equal vertical sections. 

</frameset> 



</frameset> 



<Frame> Tag: 

Once the browser screen is divided into rows and columns, 
each unique section can be loaded with different HTML 
documents. This is achieved by using the <Frame>tag. Which 
consist the following attributes. 

Src = "url" - indicates URL of the document to be loaded into 

the frame. 

Marginheight = "n" - Specifies the amount of white space to be 

left at the top and bottom of the frame. 

Margin width = "n" - Specifies the amount of white space to be 

left along the sides of the frame. 

Name: " name"— » gives unique name to the frame so it can be 

targeted by other documents. 

Noresize - Disables the frames resizing capability. 

Scrolling — Controls the appearance of horizontal and vertical 

scrollbars in a frame. This takes values yes/No/Auto. 

Eg. 

<frameset rows = "30%",*> 

<frameset cols = "50%, 50%"> 

<frame src = "filel.htm"> — Loads the 1 st frame with 

"file 1. htm". 

<frame src= "file2.htm"> — Loads 2 nd frame 

</frameset> 

<frameset cols = "50%, 50%> 

<frame src = "file3.htm"> 



<frame src = "file4.htm"> 

</frameset> 

</frameset> 

Output: 



filel.htm 


file2.htm 


file3.htm 


file4.htm 



Targeting Named Frames: 

Whenever a hyperlink , which loads a document in a frame is 
crated, the file referenced in the hyperlink will be opened and 
will replace the current document that is in the frame. This is 
done by using the Name attribute of the <frame> </Frame> 
tags. The Name takes one parameter, which is its frame name. 

The attributes, via which the frame name is specified is the 
TARGET attribute. 
TARGET = "filename". 

&, 

The attribute via which the HTML file name is specified is the 
HREF attribute which is a part of <A> </A> tag & is given by 
<A href = "index.htm" TAEGET = "main"> click here</A> 

Eg. Frame identification: 
<Frameset cols = 30%, 70%> 
<Frame name = "part"> 
<frame name = "main"> 
</frame> 



Hyperlink Specification: 

<A href = "index.htm" Target = "main"> click here </A> 
Here an index.htm is loaded into ht efare named "man" when 
the hyperlink "click here" is clicked. 

Code for frames.htm 

<html> 

<frameset rows = "70,*"> 

<frameset src = "header.htm" marginheight = marginwidht = 

name = "frame 1"> 

<frameset cols = "35%,*"> 

<frame src = "p4.htm" name = "frame2"> 

<frame src = "desc.htm" name = "frame3"> 

</frameset> 

</frameset> 

</html> 

Code for header.htm 

<html> 

<body bgcolor = "cyan"> 

<centre><hl>Purwanchal University </hl></centre> 

</body> 

</html> 

Code for Pu.htm 

<html> 

<body bgcolor = "yellow"> 

<h4> constituent college of pu </h4> 

<ul> 



<li>PUSET 

<li>Management college. 

<li>CPAD 

</ul> 

</body> 

</html> 

Code for desc.htm 

<html> 

<body bgcolor = "red"> 

<h3> programs run by PUSET are 

<ul> 

<LI> B.E computer. 

<li>B.E Elx & comm.. 

<li>BCA 

<li>MCA 

<li>BIT 

</ul> 

<br> <h3> programs run by Management college are: 

<ul> 

<li>BBA 

<li>MBA 

</ul> 

<br> 

<h3>programs run by CPAD are: 

<ul> 

<li>Master in Population science. 

<li>Master in Environmental Science. 

</ul> 

</body> 



</html> 

Code for pu.htm: 

<html> 

<frameset rows = "70,*"> 

<frameset src = "header.htm" marginheight = name = 

"header"> 

<frameset cols = "25%, *"> 

<frame name = "index" src = "indix.htm"> 

<frame name = "detail" src = "intro.htm"> 

</frameset> 

</frameset> 

</html> 

Code for header.htm: 

<html> 

<body bgcolor = "red"> 

<hl><centre> Purwanchal University </centre> </hl> 

<img src = "logo.gif ' align = middle> 

</body> 

</html> 

Code for index.htm: 



<html> 

<body bgcolor = "Red"> 

<hl><centre>Purwanchal University </centre></hl> 

<img src = "logo.gif align = middle> 

</body> 

</html> 



Code for index.htm: 

<html> 

<body background = "pu.img"> 

<h4> constituent colleges of PU 

<ol> 

<li> < a href = "puset.htm" Target = "Details">PUSET </a> 

<li><a href = "management.htm" Target= "Details> 

Management college </a> 

<li><a href = "CPAD.htm" Target^ "Details">CPAD</a> 

</ol> 

</body> 

</html> 

Code for intro.htm: 



cyan 



> 



<html> 

<body bgcolor 

<br> 

<p><i> Purwanchal university is established in 2056. It has 

started several technical programs with a view to introduce 

New technology in Nepal. The university has its 3 constituent 

colleges all location at biratnagar 



</i> 

</body> 

</html> 




Constituent college 
ofPU. 

l.PUSET 

2. Management 
College 

3.CPAD 



Purbanchal university is established 
in 2056. It has started several techni 
cal programs to introduce new techn 
ology in Nepal. The university has 
its 3 constituent college 



Again : 

- write code for PUSET.htm 

- Write code for management.htm 

- Write code for cpad.htm. 



Cascading Style Sheets: 

Style sheets are used for adding styles (eg. Fornts , colrus, 
spacing) to web document. The maintains the standard and 
uniformity throughout a web site and provide numerious 
attributes to create dynamic effects. With style sheets, text and 
image formatting properties can be predefined in a single list. 
The advantages of a style sheet includes the ability to make 
global changes to all documents for a single location. For CSS 

, <style> </style> tags are used. Between the 

<style>...</style> html tags, specific style attributes are listed. 
The <style> </style> tags are written within the <head> 
....</head> tags. 



Syntax: 

<style type = "text/css"> 

Tag { attribute: value; attribute: value ., 



••} 



Dynamic HTML: 

DHTML is a new and emerging technology that has evolved to 
meet the increasing demand for eye-catching and mind-catching 
web sites. 

DHTML combines HTML with cascading style sheets 
(CSSs) and scripting languages. HTML specifies a web page's 
element like table, frame, paragraph, butteted list etc. 
Cascading style sheets can be used to determine an element's 
size , color , position, and a no of other features. Scripting 
language can be used to manipulate the web page's elements so 
that styles assigned to them can change in response to a user's 
input. 



</style> 

Font attributes: 

Font- family : 

Font-style: 
Font-weight: 



Font size: 



a comma- delimited sequence of font family 

Names ( aerial, cursive). 

Normal, italic or oblique. 

Normal, bold, bolder or one of the nine 

nine values( 100,200, 300, 400, 500,600, 

700, 800, 900) 

XX-small, -small , small, medium, large, 

X-large, xx-large. 



Eg. 

<html> 

<head> 

<title>Style sheets </title> 

<style type = "text/css"> 

HI {font-family: Arial: cursive} 

P {font-size 12pt; font-style: italic} 

</style> 

<head> 

<body> 

<hl>purbanchal university </hl> 

<p> this university was established in 2056. There are there 

constituent college of pu. And all are located at biratnagar. 

<p> PU has many affiliated colleges among them is the 

EASCOLL 

</body> 
</html> 

Color & background attributes: 

Color: an element text color. 

Background-color: Specifies the color in an element's 
background. 

Backgroundimage : sets background image. 
Eg. <html> 
<head> 

<title>CSS</title> 
<style type = "text/css"> 

HI {font-family: Arial, Helvetica; font-size:26pt; background- 
image: pu.jpg;} 



H2 {font- family: Arial, Helvetica; background-image:pu.jpg} 

p{ font- size ;12pt; font-style: italic; font-weight:bdd; coloured; 

background-color: red} 

</style> 

</head> 

<body> 

<hl>welcome to purbachal university </hl> 

<br><br> 

<h2>Introduction </h2> 

<p> the university was established in </P> 

</body> 
</html> 

Text attributes: 

Text-decoration: Adds decoration to an element's text .name, 
underline, overline, line-through, blink 

Vertical-align: Determines on element's vertical position. Sub, 
super, top, text-top, middle, bottom, text-bottom. 

Text-transform: Applies a transformation to the text. Capitalize 
(puts the text into initial caps), uppercase, lowercase, or none. 

Text-align: Align text within an element. Right , left, centre. 
Text-indent: Indents the first lien of text. 

Eg. 

<html> 

<head> 



<title>CSS</title> 

<style type = "text/css"> 

HI {font-family: arial, Helvetica; font-size:26pt;text- 

decoration:blink; coloured} 

P {font-size: 12pt; font-style: normal; font-weight: bold; 

coloured } 

H6 {font-size: 12pt; font-style: italic ; colonred; text-indent: 

.5in} 

</style> 

<head> 

<body> 

<hl> purbanchal university </hl> 

<br> 

<p>This university has 3 constituent colleges <p> 

<ul> 

<li> PUSET 

<li>Management campus 

<li>CPAD 

</ul> 

<u>EASCOLL</u> 

<h6> EASCOLL is an affiliated college of PU. It has the 

stream like B.E computer and B.E elex & comm. 

</h6> 

</body> 

</html> 



Border-width : Thin , medium 
Border- top- width: Thin, medium 
Border-bottom-width: Thin, medium 
Border-left-width: Thin, medium 
Border-right-width: Thin, medium 
Border-top: Specifies width, color & style. 
Border: Sets all the properties at once. 

Margin related attributes 
Margin-top: percent, length or auto. 
Margin-bottom: percent, length or auto. 
Margin-left: Percent , length or auto. 
Margin-right: percent, length, or auto. 
Margin :percent, length, or auto. 

Eg. 

<html> 

<head> 



<style type= "text/css"> 

Body {margin-top: 10%} 

HI {font-family:arial, Helvetica font-style: italic} 

</style></head> 

<body> 

<hl> purbanchal university </hl> 



Border Attributes: 

Border-style: solid, double, groove, inset, outset. 
Border-color: color name 



List attributes: 

List-style: Disc, circle, square, decimal, lower-roman, upper- 
roman, lower-alpha, upper-alpha. 



Eg. 

<html> 

<head> 

<title>CSS </title> 

<style type = "text/CSS"> 

Body {margin- top: 10%} 

HI {font-family: arial, Helvetica; color: red} 

UL{ lst-style-type: lower_roman} 

</style> 

</head> 

<body> 

<hl> welcome to PU </hl> 

<p> Engineering courses offered by PU are 

<ul> 

<li>B.E Computer 

<li>B.E Elx & comm.. 

<li>B.e civil 

<li>B.Arch. 

</ul> 

</body> 

</html> 

Class: 



Style sheets support classes or sets of style changes for a 
document. A calls can be defined to change the style in a 
specific way for any element it is applied to and classes can be 
used to identify logical sets of style changes that might be 
different for different html elements. The style changes can be 
applied directly to each html element of applied directly to each 



html element of applied to part of a document with <span> 
</span> tags. If any element is made a member of a class by 
inserting class = class name into its opening tab, it conforms to 
that class's specification. 



Eg. 



<html> 

<head><title>class </title> 

<style type = "text/css"> 

P {font-size 12pt; font- weigh: bold; 

P {font-size 12pt; font_wight:bold; 

marginright: 1 0% } 



margin_lef:10%; 



Left tag <— & it; style & gt — » right tag. 
o/p : <style> 

♦ question {color : brown; font-style: italic } 

♦ answer {color: red } 
</style> 

</head> 

<body> 

<p class = "question">How many students are in B.E computer 

? </p> 

<p class = "answer">There are 17 students in B.E computer ? 

</p> 

<p class = "question"> What are the subjects tought in 1 st 

semester? </p> 

<p class= "answer">The subjects are 



<ol> 

<li>comp. concept 

<li>Maths-I 

<li>C-programming 

<li>Engg : Drawing 

<li> Workshop technology 

<li> Communicative Technique. 

</ol> 

</body> 

</html> 

External style Sheets: 

External style sheets are composed of standard text, which 
consists of a series of entries, each composed of a selectors & a 
decoration. The selector indicates the html elements affected by 
the properties in the declaration. These external style sheets are 
saved as a file with extension.css, which can be linked, to a web 
page via the<link> tag. 
Syntax: 
<link rel = stylesheet href = "style sheet file name"> 

Eg. Code for mystyle.css 
P {font-size: 12pt; font- Wight: bold 

question {color: brown; font- style: italic} 

answer {color: cyan} 

big {font- size :14pt; text-decoration:underline; text- 

transformatiomuppercase; colonred} 

code for index.htm 
<html> 



<head> 

<title>external style sheets</title> 

<link rel= stylesheet href= "mystyle.css> 

</head> 

</body> 

< p class= "question">What are the subject in <span class= 

"big"> B.E computer </span>first semester. 

<p class = "answer"> The subjects in first semester of <span 

class = "big"> B.E computer </span> are: 

<ol> 

<li> 

<li> 



</ol> 

</body> 

</html> 



Chapter# 3 

Java Script: 

Introduction: like many other programming languages Java 
script is programming language, which mainly used with web 
pages. This languages is very useful when providing 
interactivity to a web page. A Java script is a program which is 
included on an HTML page. In the html page , it is enclosed 
within <script> and end it up with </script>. When used with a 
browser, it knows that this is a programs written under Java 



script and gives the result instead of giving the text of the 
script. The<script> tag is written with the <head> section of the 
html page. It can also be written within the<body> section. 

Java & javascript: Java & Java script have only name in 
common and nothing else. They are poles apart. Java is 
basically a programming language which is enhancement of 
C++ having a distinctive feature of being able to run on various 
machines and operating systems like windows NT, Mac Os, 
Unix. 

Java script is a object-oriented language that allows creation 
of interactive web pages. Java script allows user entries, which 
are loaded into an HTML form to be processed as required. 
Java script offers several advantages to a web developer. The 
strengths of Java script can be easily and quickly used to extend 
the functionality of HTML pages. 

Netscape & Java Script: Java script is scripting language 
created by Netscape hence JavaScript works best with the 
Netscape suite of client and server products. The Netscape 
client 'browser' products is called Netscape communicator. The 
default scripting language that Netscape communicator 
understand is Java Script. 

Netscape server product is called Netscape commerce server. 
The default scripting language that Netscape commerce server 
understands is JavaScript. 



Database Connectivity: 



Netscape has a product called 'Live wire', Which permits 
server side , JavaScript code, to connect to Relational Database 
management systems (RDBMS) like oracle, My SQL server, 
My SQL etc 'live wire' database drivers also support a no of 
non-relational database. 

Client Side JavaScript: Client side Java Script is embedded 
into a standard HTML program. JavaSript is embedded between 

the <script> </script> html tags. These tags are embedded 

within the <head> </head> or <body> </body> tags of 

the html program. 

Java script is embedded into an html program because 
JavaScript uses the filename.html and http protocol to transport 
itself from the web serve to the client's browser where the 
JavaScript executes and processes client information. Only a 
browser that is JavaScript enabled will be able to interpret 
JavaScript code. Netscape communicator does this best as Java 
script is the natural language of NetScape communicator. 
Microsoft is Internet explorer also interprets JavaScript. 

Capturing user Input: Web site interactivity starts from being 

able to capture user input. The <form> </form> html tags 

can be used to create a user request-form. Between these html 
tags, the html <input> </input> tags can be used in the html 
form to facilitate the captures of user data. 

The HTML objects used in html form creation are 'Text' 
'Text area' , 'Radio Buttons', 'push Button', 'check Boxes' and 
so on. These will be passes as 'values' to the types attributes of 
the <input> </input> tags. Once the html form has been coded 
in fielname.html JavaScript can be embedded in the same thml 



file to make it interactive and facilitate client side data 
validation and processing. 

The HTML form objects are used to capture user i/p while 
client side, JavaScript is due do validate and process such user 
i/p. Once user i/p posses the validation tests applied and has 
been processed by client side, JavaScript, the form data 
captured will have to be passed to the web server where from 
where the HTML file originated . 

At the web server an appropriate program (eg. Javascritp , VB 
script, perl etc). Will accept the user i/p. Based on user i/p info 
will be assembled on the web server, converted to an HTML 
file and returned to the user. 

Advantages of JavaScript: 

1. An interpreted language: It do not requires compilation 
steps . The syntax is completely interpreted by the 
browser just as it interprets HTML tags. 

2. Embedded within HTML: JavaScript does not required 
any separate editor for programme to be written, edited 
or compiled. It can be written in any text editor like 
notepad along with html tags and saved as fielname.html. 

3. Minimal Syntax- easy to learn: By learning few 
commands , simple rules of syntax, complete application 
can be built using JavaScript. 

4. Quick development: As JavaScript does not require time 
consuming compilation, scripts can be developed in short 
period of time. 

5. Designed for simple, small programs: Small programs can 
be easily written executed at an acceptable speed using 
JavaScript and can be easily integrated into a webpage. 



6. performance: Java Script can be written such that the 
html files are compact and quite small. This minimizes 
storage requirements on the web server and download 
time for client. 

7. Procedural capabilities: Every programming language 
needs to support facilities such as condition checking , 
looping and branching. Javascript provides syntax which 
can be used to add such procedural capabilities to web 
page coding. 

8. Deigned for programming user events. It support 
object/event based programming. 

9. Easy debugging and Testing: Being an interpreted 
language , JavaScript are tested line by line, and errors 
are listed when encountered. Thus it is easy to locate 
errors, make changes and test without any difficulty. 

10. platform independence/ Architectural Neutral: Java Script 
is a programming language that is completely 
independent of the h/w on which it works. It is a language 
understood by any JavaScript enabled browser. Thus 
JavaScript applications work on any machine that has an 
appropriate JavaScript enabled browser installed. 

Java Scripts Syntax: 

<Script language = "JavaScript"> 



</script> 

Netscape communicator-default javascript 
internet explorer-defult VB Script. 



Programming Technique: 

Variables: It is used to store values that can be used in other 
parts of a program. It can be upper case letter (A to Z), 
lowercase letter (a to z). underscore character. (_). Or dollor 
sign character ($). Variable name are case sensitive. 

Creating variable name: 
Syntax: var <variable name> = value; 
Eg. Var first_name; 

Var last_name= "Shrestha" 

Var phone = 1234567; 
<html> 
<head> 

<script language = Java Script> 
Var name=prompt ("Enter your name, "Name"); 
</script> 
</head> 
<body> 

<script language = "Java Script"> 
Document.write ("<h2>Hello +name"+ "</h2>"); 
</script> 
</body> 
</html> 

Here prompt( ) method picks up a string from the user which is 
then assigned to the variable name. Document.write embedded 
in the <body> </body> tags write the content of variable name 
to the client browser. 

Javascritp Array: 



Array are javascritp objects that are capable of storing a 

sequence of values. These values are stored in indexed location 

s within the array. An array must be declared before it is used . 

An array can be declared using any one of the following 

techniques. 

Arrayname = new Array(array length) 

ArrayName= new array( ) 

Eg. 

Cust_orders=new array( ) 
Cust_orders[50]= "lion pencils" 
Cust_order[100]= "Natraj eraser" 

Desne Arrays: A dense array is an array that has been crated 
with each of its elements being assigned a specified value. They 
are declared and initialized at the same time. 

e-g 

array name = new array (value 0, value 1 , , value n ) 

Methods associated in manipulation of array with its element 
content. 

Join ( ) : returns all elements of the array joined together as a 

single string. 

Reverse( ): reverse the order of the element in the array. 

Join ( ) Method: 

<html> 

<head><title>It is my Java try</title></head> 

<body> 



<scriptlanguage ="javascript"> 
friends=new array(5); 
friends [0]="Devnarayan j i" ; 
friends[l]="Maninshji"; 
friends [2]="Deepak dai"; 
friends[3]="sita saran"; 
friends [4]="ram"; 

document.write(friends[0]+"<BR>") 
document. write(friends[ 1 ]+"<BR>") 
document.write(friends[2]+"<BR>") 
document.write(friends[3]+"<BR>") 
document.write(friends[4]+"<BR>") 

join_crit= friends join(); 

document. write(j oin_crit) ; 

</script> 

</body> 

</html> 



Operators & Expressions in Java Script: 
Arithmetic operation: 

+ — > addition 

- — > Subtraction 

* -» Multiplication 

/ — » Division 

% -^-Modulus 

~ — » Return the value then decrement 

++ — > Return the value then increment. 



Logical operation: 

&& — » logical and 

! ! — > Logical or 
! — > logical not. 

Comparison operation: Compare two value. 

= = — > equal 

= = = — > strictly equal 

!= — » not equal 

! = = — > strictly not equal. 

< — » less then 

> — > greater then 

<= -> less than or equal to 

>= — > greater than or equal to 

Assignment operator: 

a = b : It set a value to the value of b. 
a+=b: It is same as a = a+b 
a*=b: It is same as a = a*b 
a-=b: It is same as a = a-b 
a/=b: It is same as a = a/b 
a%=b: It is same as a = a%b 

Ternary operator: 

Java script support the conditional expression operator. They 

are ? &: 

Syntax: 

Condition? Value l:value2. 



The condition expressed must return a true or false. If the 
condition is true, value 1 is the result of the expression, 
otherwise value2 is the result of the expression. 
/*Program to greets a user with a message when a user leaves 
this page, display the good-bye alert dialog box */ 

<html> 

<head><title>PU</title></head> 
<script language = "Java Script"> 
Var name = " "; 
Function hello( ) 

{ 

Name = prompt ("Enter your name": 'Name'); 

alert(' Greeting '+name+ 'Welcome to purwanchal university!'); 

} 

Function good bye ( ) 

{ 

alert (' goodbye '+name+ 'sorry to see you go!'); 

} 
</script> 

</head> 

<body on Load = "hello( );"onUnload= "good bye( )"> 

<img src = "pu.gif '> 

</body> 

</html> 



<body> 

<script language^ "Java script"> 

Document.write("Welcome to Java Script") 

</script> 

</body> 

</html> 

Comments: For putting comments in the program we use /* 

*/. Any thing written between these symbols are not 

executed. 



Using Quotes: 

Character 

V 
\" 

w 


Meaning 
Single quote. 
Double quote 
back slash 


\t 


horizontal tab 


\b 


back space. 



<html> 
<head><title> 



</title> 



e-g 
<html> 

<head><title> </title></head> 

<body> 

<script language = "Java Script"> 

Document. write("I Said, V'That is mine!\ "<br>") 

Document. write("He said, "NO it\'s not . "<br>") 

Document.write("I hope that \'s clear now") 

</script> 



</body> 
</html> 

Output: 
I said, "ThatVs mine!" 
He said, "No it's not. 
I hope that's clear now. 

Using Alert: 

You can alter the user about anything by using alert symbol. 

e-g 

alert ("Welcome to PU") 



A 


Welcome to PU 
\ 




X 


A 


ok 

















Functions: These can be called as many times as needed 
during the running of the script. E.g . Let us say that you have 
same info. That a user typed into a form and you saved it using 
Java script. If you need to use that information again and again, 
you could repeat the same code over and over in your script. 

Eg. 

Function purbanchal (message) 

{ 

alert ("write the message") 

} 
<html> 



<head> 

<title> </title> 

</head> 

<body> 

<script language^ "Java script"> 

Function purbanchal (message) 

{ 

Alert (message) 

} 
</script> 

<h3>faculty run by PU</h3> 

<form> 

<input> 

type = "button" value= "computer" onclick= "purbanchal 

("welcome to B.E computer")"> 

<input type = "button "value = "E&C" onclick - 'purbanchal 

("welcome to B.E electronic & comm.")" 

<input type = "button" value= "civil" onclick = 

"purbanchal("welcome to B.E civil")"> 

</form> 

</body> 

</html> 

Output: 

Faculty run by PU 



Computer 




E&C 




Civil 




Welcome to B.E 
computer 




Welcome to B.E 
Electronics & comm. 




Function in Java Script: 
Built in Functions: 

1 . Eval function: The eval( ) function can be used to convert 
a string expression to a numeric value. E.g 

Var grandjotal = eval("l 0*10+5"); 

This will result the value 105 to variable grand_total. 

2. Parselnt( ): The parselnt( ) function is used to convert a 
string value to integer. Parselnt( ) returns the first integer 
contained in a string or if the string does not begin with 
an integer. Eg. 

Var string2Num = porselnt ("123xyz"); 
Results 123 assigned to variable string2Num 

Var string2Num = parselnt("xyz"); results a "NON"(not a no) 
assigned to variable string2Num. 

Var string2Num =pasetFloat("1.2xyz"); result 1.2 being 
assigned to variable string2Num. 



Use as eval( ): 

Eg. 

<html> 

<head> <title>. 



</title></head> 



<body> 

<script language = "Java Script"> 

Document.write (eval("5*6")) 

Document. write("<br>") 

Document.wirte (eval("6/5")) 

Document.write ("<br>") 

Var grandjotal = eval("l 0*10+5"); 

Document.write (grand_total); 

</script> 

</body> 

</html> 

2. prompt dialog box: Java script provides a prompt dialog box 
for user interaction. The prompt( ) method instantiates the 
prompt dialog box which displays a specified message. In 
addition, the prompt dialog box also provides data entry field, 
which accepts user i/p thus a prompt dialog box: 

- Display "predefined message". 

- Displays a text box and accepts user i/p. 

- Displays on ok and cancel button. 

The prompt dialog box causes program execution to halt unit 
user action takes place. 

- Clicking on the "ok" button causes text typed inside the 
textbox to be passed to the program. 

- Clicking on the "cancel" button causes a NULL value be 
passed to the environment. 

Syntax: 

Prompt("message", "default value") 

Eg. 

Prompt ("Enter your favorite college:", "EASCOLL"); 



The value entered into the textbox on the prompt dialog box is 

accepted and can be stored in a variable. 

<html> 

<head><title> </title></head> 

<body> 

<script language = "Java Script"> 

Document.write(<img src = "purbanchal.gif" >); 

Document. write("<hl>Greeting.</hl>"); 

Document.write(prompt ("Enter your Name of college", 

"Name"); 

Document. write ("Welcome to purbanchal university! </hl>"); 

</script> 

</body> 

</html> 

Output: 



Enter your name of college. 



name 



ok cancel 



Dialog boxes: Java Script provides the ability to pickup user 
i/p or display small amount of text to the user by using dialog 
boxes. These dialog boxes appears as separate windows and 
their contents depends on the information. Provided by the user. 
There are 3 types of dialog boxes provided by Java Script. 



passed to the alert( ) method, as well as an ok button . 
The Java Script and the HTML program, in which this 
code snippet is bed , will not continue processing until ok 
button is clicked. 
Syntax: 
Alert("message"); 

Eg- 

Alert("click ok to continue"); 

Eg- 
<html><head> 

<title> </title></head> 

<body> 

<script language = "Java script"> 

Alert ("welcome to purbanchal university"); 

Document. write("<img src = "purbancla.gif>"); 

</script> 

</body> 

</html> 

Output: 




1. The alert dialog box: The simplest way to direct small 
amount of textual output to a browser's window is to use 
alert dialog box. The alert dialog box displays the string 



When ok is clicked , purbanchal.gif image is opened. 



The conformation dialog box: As the name suggest, this 
dialog box serves as technique for confirming user action. The 
conform dialog box displays the following information. 

- A pre-defined message. 

- Ok and cancel button. 

The conform dialog box, causes the program execution to halt 
until user action takes place. User action can be either the "ok" 
button begin clicked or the "cancel" button begin clicked which 
causes the following action to take place. 

- Clicking on ok button cause TRUE to be passed to the 
program which is called the confirm dialog box. 

- Clicking on cancel button causes FALSE to be passed to 
the program. 

Syntax: conform ("message") 

e.g confirm ("Are you sure to exit out of the system?"); 

eg- 
<html> 

<head> <title> </title></head> 

<script langue = "Java Script"> 

Var question = "What is 10+10?"; 

Var answer = 20; 

Var correct = '<img src = "imagel.gif '>'; 

Var incorrect = '<img src = "image2.gif '>'; 

Var Response^ prompt (question, "0"); 

For (count = l;count<3;count++) 

{ 

If (Respond! = answer) 

{ 

if (conform ("wrong, press ok for another chance")); 

{ 



Response = prompt(question, "0"); 

} 
else 

{ 

Alert("Better luck next time"); 

Count = 3 ; 

} 

} 
Else 

{ 

Alert ("Great! ! You are right"); 

Count =3; 

} 

} 

Var output = (Response = = answer)? Correct: incorrect 

Document. write(' '<br>' ') ; 

Document, write(output) ; 

</script> 

</head> 

<body> 



</body> 
</html> 

Output: 













What is 10+10 








30 


















ok 




cancel 












This program asks a question and accepts an answer. This user 
is given 3 chance. The 2 nd and 3 rd chance to provide an answer 
can be accepted , or rejected, if accepted the program prompts 
for an answer again. 

The Java Script Document Object Model: 

Java Script enabled browsers are capable of recognizing 
individual objects in an HTML page, after the page has been 
rendered in the browser, because the JavaScript enabled 
browser recognizes and uses the Document Object Model (i.e 
DOM). 

Using the DOM Java Script enabled browsers identify the 
collection of web page objects that have to be dealt with while 
rendering an HTML based, web page in the browser window. 
The HTML objects, which belong to the DOM, have a 
descending relationship with each other. 

The topmost object in the DOM is the 'Navigator' (browser) 
itself. The next level in the DOM the browser's window. The 
next level is the 'Document' displayed in the browser's 
window. If the document displayed in the browser's window 
have an HTML 'form' coded it , then 'form' is the next level in 
the DOM. 



The DOM hierarchy consists downwards that consists 
elements on a form such as text boxes , labels, radio buttons, 
check boxes etc. 

When a web page is rendered in a JavaScript enabled 
browser window, JavaScript is capable of uniquely identifying 
each element in the web page, because elements of a web page 
are bound to the DOM. The DOM that JavaScript recognizes is 
described below: 

N avigator- 



Window 



1 



Document 



-♦Anchor 
-►link 
-»-Form — 



-►textbox 
-►text area 
-►radio button 



-► check box 
-► select 
-►button 



Fig: JavaScript DOM. 



Java Script Assisted style sheet Dom [JSSS DOM]. 
JSSS use Java Script syntax to control a document's 
presentation style. When a JSSS is embedded in an HTML page 
within the <head> </head> tags, then the Java Script DOM 
picks up a whole new set of objects, when add to the standard 
DOM objects recognized by Java Script. 
Objects added to the DOM by use of JSSS are: 



Document- 



tags 



-P 
►DIV 

► SPAN 

►HI through H6 



Calsses 



ads 



• tag names 



Since JavaScript understands the DOM and can extend the 
DOM with the use of JSSS in a web page JavaScript 
understands 'objects'. All objects have: 

- Properties that determine the functionality of the object. 

- Methods that allows access to these properties . 

- Events that allows JavaScript code to be connected to the 
object by being mapped to appropriate JavaScript event 
handlers. 



Forms 

Creating a form: It is divided into 3 parts: 

- Forms tag includes the URL of the CGI script that will 
process the form. 

- Form elements, like fields and menus. 

- Submit button, which sends the data to the CGI scritp on 
the server. 

Steps for creating the form: 



- Type <form to initiate the form. 

- Type MTHOD = method , where method is either GET 
or POST. 

- Type ACTION = "Scrpt.url">where script.url is the 
location on the server of the CGI Script that will run 
when the form is submitted. 

- Create the form's contents. 

- Type </form> to complete the form. 

Working with Menus: 

- Type <select 

- Type NAME= "name", where name will identify the data 
collected from the menu when it is sent to the server. 

- Type size = "n" , where n represents the number of 
options that should be initially visible in the menu. 

- Type> to close the option. 

- Type< option to start the next option. 

- Type SELECTED if you want the option to be selected 
by default. 

- Type value = "value", where value specifies the data that 
will be sent to the server when the option is selected. 

- Type > to close this option. 

- Type the option name as you wish it to appear in the 
menu. 

- Repeat step 6 - 10 for each option. 

- Type </select> to close the select option. 

Eg. 
<html> 



<head><title> </title></head> 

<form method = post> 

<h2> personal Information </h2> 

<hr> 

<p> Name: <input= "text" Name = "userid" size = "25"> 

<p>address: <input= "text" Name= "address" size = "35"> 

<p>pin : <input = "text" Name= "pin" size= "6"> 

<p>Date of Birth : <input = "text" Name= "dob" size = "15"> 

<hr> 

<input type = "submit" value = "send Info"> 

<input type = "reset" value = "Reset"> 

</form> 

</body> 

</html> 

Output: 



Personal Info 

Name: 

Address: 

PIN: 

Date of birth: 


Send info Reset 





Option: 

Eg. 

<html> 
<head>.. 
<body> 



</head> 



<form> method = "post"> 

<p><h2>Personal Information </h2> 

<p>Name: <input= "text" name= "userid" size = "25"> 

<p>Address: <input = "text" name= "address" size = "35"> 

<p>pin: <input= "text" name= "pin" size = "6"> 

<p>Date of birth: <input = "text" Name= "dob" size= "15"> 

<select color of hair = "hair" size = "5"> 

<option value = "1"> Black 

<option value= "2">Gray 

<option value= "3">Light brown 

<option value= "4">Dark brown 

<option value= "5">Red head. 

</select> 

<hr> 

<input type= "submit" value = "send info"> 

<input type = "reset" value = "reset"> 

</form> 

</body> 

</html> 

Output: 



Name: 

Address: 

Pin: 

Date of birth: 

Select color of hair 



Black 
Grey 

Light brown 
Dark brown 
Red head 



Radio Buttons: 

Instead of giving the options of selection of the options to the 
user, we can provide buttons to click one of them as a feedback. 
These buttons are also known as radio buttons. 
Continue the page as before: 



<p> Date of birth: <input= "text" Name= "dob" size= "15" 

<p><strong >Select color of Hair </strong> 

<br> 

<input type= "radio" Name= "hair" value= "Black">Black 

<input type = "radio" Name= "hair" value= "Grey">Grey. 

<input type = "radio" Name= "hair" value= "Dark 

brown">Dark brown. 

<input type = "radio" Name= "hair" value= "light brown 

">Light brown. 

<input type = "radio" Name= "hair" value= "Red head">Red 

head 

<hr> 

<input type = "submit" value = "send info"> 

<input type = "reset" value= "reset"> 

</form> 

</body> 

</html> 

Output: 

Select the color of hair 

O Black O Grey O Light brown O Dark brown O Red head 



Check boxes: 

Check boxes are similar to radio buttons. Instead of rounded 
hollow buttons, they are square boxes. The only thing to change 
in the text is that replace radio with checkbox . 

Text Area: 

It is the palace where the user can write comments. The 
parameters of text area contains the no of rows and columns. 

Eg- 

<p><textarea name= "answer" rows= "4" cols = "60"> your 

comments </text area> 

Output: 




Password Boxes: 

This provide space for creating a password. 
<p> password: <input type = "password" name= "password" 



size 



T0"> 



Submit buttons: 

This is used to submit the form. Along with submit suttens , 
we can place too which the user will click to respond. 

Eg- 

<button type = "Submit" Name = "Submit" value = "Submit"> 

<img src = "crane.jpg" width =10 height= 30> press </button> 



Resetting the form: 

While filling up the form, it is very likely that the visitor may 
make a mistake which can be spelling or second thought. You 
can give visitors a reset button so that they can start over with a 
fresh form. 
Steps: 

- Type <input type = "reset" 

- If desired type value = "reset message" where reset 
message is the text that appears in the button. The default 
reset message is reset. 

- Type> to close the tag. 

Eg. 

<input type = "reset value = "reset message"> 



Understand Objects in HTML: 

Properties of HTML Objects: 

Just like real world objects HTML objects have a no of 
properties that determine the behavior of the object. Syntax: 

Eg- 

Textbox have properties like name, size and so on. 

Methods of HTML objects: Methods of an object are used to 
set or get a value of an object's property. It can be references 
as: 
Object Name. Method Name 

Browser Objects: when any Javascript enabled browser leads a 
web page, the browser automatically creates a no of javascript 
objects that map to the DOM. It is the DOM, which provides 
JavaScript access to the HTML objects that are contained in the 
web page. 
The javascript object crated by Netscape communicator are: 



Object Name: 
Navigator 

Window 

Document 

Location: 



Its use: 
:To access information about the browser 
that is executing the current script. 
:To access a browser window or a frame 
within the window. 

:To access the document currently loaded 
into a window. Tags used for document in 
HTML are head and body . 
:To represent a URL 



History: 

event: 

Even: 

Screen 



:To maintain a history of the URL's access 

ed within a window. 

: To access information about the occurance 

of an event. 

The Event object provides constants that are 

used to identify events. 

:To access information about he size and 

color depth of a client computer's screen in 

which the current browser is running. 



How a Java script enabled browser handles the Document 
object: 

Any document can contain various HTML objects such as: 

- images 

- image map 

- hyperlinks. 

- Frames 

- Anchors 

- Forms with various form elements. 

The browser creates one array in memory per HTML object in 
the document. If these HTML objects are actually contained in 
the HTML page then these array will hold indexed elements, 
which will point to the context area in memory wehre the 
HTML object are otherwise the array will exist, but will be 
empty. The first image in the document will have the array 
index as [0], the next image in the document will have the array 
index of [1] and so on. 

Java script provides access to the arrays and their elements. 

The Java script arrays created by Netscape communicator are 



- image/images array. 

- Link/links array. 

- Area 

- Frame/frames array. 

- Anchor/anchors array. 

- Form/forms array. 
And so on. 



The image 
array 




The area 
array 




The links 
array 




The frames 
array 
















The anchor 
array 




The applets 
array 




Form 
array 





Common content area in computer memory. 



Access to element of a web page: 

Once a web page is rendered (pointed) in a browser window, it 
is completely static. For any program code to be able to interact 
with the web page, each element of the web page should be in 
memory, with unique name. The unique name translates to a 
content area in memory where the web page element resides. 

When a web page is assembled in memory prior being 
rendered in the browser's window, a Java Script enabled 
browser creates several arrays. These array hold references to 
individual objects. 



When Java script is processed , the web page can be rendered 
in the browser . When re-rendered, the browser changes made 
to the web page elements will be visible. 

Handling events using JavaScript: 

Java Script has several event handlers that ate mapped to on 
HTML object's events. Java Script, event handlers can be 
divide into two types. 

- Interactive and 

- Non-interactive. 

An interactive even handlers depend on user interaction with 
an HTML page. Eg - 'OnMouseOver' event handlers is an 
interactive event handler. This requires the user to move the 
mouse cursor over a web page. 

Non- interactive event handlers does not need user interaction 
to be invoked. Eg. 'OnLoad' event handler automatically 
executes whenever a form is laded into a web page. 

Name of Java Script event handlers: 

1. OnAbort — * the loading of an image is aborted as a 
result of user action. 

2. OnBlur— > a document, window, frame set or form loses 
the current i/p focus. 

3. Onchange— » A text field, text area, file upload field or 
selection is modified and loses the current i/p focus. 

4. OnClick— >• A link, client-side image map area or form 
element is clicked. 

5. OnDbl Click— >• A link, client-side image map area or 
document is double clicked. 



6. On DragDrop— > A dragged object is dropped in a 
window or frame. 

7. OnError— >• An error occurs during loading of an image, 
window or frame. 

8. OnFocus— > A document, window, frame set or form 
element receives the current i/p focus. 

9. OnKeyDown— >• The user presses a key. 
lO.OnKey Press— >• The user presses and releases a key. 
1 1 .OnKeyUP— » The user releases a key. 

1 2. OnLoad— >• An image, document or frame set is loaded. 
13.0nMouseDown— > The user presses a mouse button. 
14.0nMouseMove— >• The user moves the mouse. 
15.0nMouseOut— > The mouse is moved out of a link or an 

area of a client side image map. 
1 6. OnMouseOver— >• The mouse is moved over a link or an 

area of a client side image map. 
17.0nMouseUP— >• The user releases mouse button. 
18.0nReset— >• The user resets a form by clicking the form's 

reset button. 
19.0nResize— >• The user resizes a window or frame. 
20.OnSelect— > Text is selected in a text field or a text area. 
21.0nSubmit— » The user presses a form's submit button. 
22.0nUnload— >• The user exits a document or frame set. 



<p> < A href = "computer.htm" OnMouseOver = "alert('Line 

to B.E computer ')"> 

Move your mouse over this link & a popwindow is displayed 

</A> </p> 

</body> 

</html> 

OnLoad and OnUnLoad: 

<html> 

<head> </head> 

<body onLoad = "('Hello Ram')" 

onUnLoad = "('Good bye')"> 

<hl> Handling Load events in a content document </hl> 

</body> 

</html> 

<html> 
<head> 

<script> count =0 </script> 
<body> 

<hl> Event handler with count </hl> 
<p> < A herf = "computer.htm" onMouseOver = '++count' 
Alert ("you have moved your mouse" +count + "times. ")'> 



Program using Event handler: 
<html> 

<head><title> </title><head> 

<hl> Welcome to PU</hl> 



Move your mouse over this link and a popwindow will tell 

howmany times you moved the mouse </A></p> 

</body> 

</html> 



Form Object: 

When creating an interactive web site for the internet it is 
necessary to capture user input and process this input. HTML 
provides the <Form> </Form> tags with which an HTML form 
can be created to capture user input. As soon as the <form> 
</form> tags are encountered in an HTML program by a 
JavaScript enabled browser, the browser creates a 'forms array' 
in memory. This array tracks the no of form objects described 
in the HTML program. The Java Script 'forms array' holds 
inform about each object used within the <form></form> tags. 

Form 1. elements 



Forms o 


bjects (Array) 




■ ►■ 


Index 


Value 







1 


Form 1 
Form 2 












Form 2 


elements -« 







Index 


Value 




1 
2 


Form l.elementl 
Form lelement 2 
Form l.elemetn3 



Index 


Value 





Form 2. element 1 


1 


Form 2. element 2 


2 


Form 2.elemetn 3 


3 


Form 2.elemetn 4 


4 


Form 2.elemetn 5 



Program: 

1 . count the number of element in form's element array. Check 
the number returned against the no of form elements describe 
between the <FORM> </FORM> tags in the HTML page that 
is running in the browser. Recognize that the number of 
elements in the element array match the number of elements 
describe between the <FORM> </FORM> in the HTML page 
exactly. 



First Form: B.E Form 1 












First Name: 






O First Year Q Second Year q Third Year Q Fourth Year 




Click 1 








First Form: BCA Form 2 




No of Form elements 
of B.E forml = 6 




First Name: 














OK 
















c 


First Year 


O Second Year Q Third Year Q Fourth Year 






Click 2 





















Fig:- Form element's Array. 



Second Form: B.E Form 1 
First Name: 



O First Year Q Second Year Q Third Year Q Fourth Year 



Click 1 



Second Form: BCA Form 2 
First Name: 



Text 1 is at position 
o. 



O First Year Q Second Year Q Third Year Q Fourth Year 



Click 2 



<html> 

<head><title> </title> 

<script Language = "JavaScript"> 
Function ver(forml) 

{ 

V= form 1. element, lenght; 

If (forml.element[5].name= = "Buttonl") 

{ 

Alert ('First Form name: '+document. forms [0]. name); 

Alert('No. of form elements of + document. forms [0]. name + 

} 

Else if (form 1. elements [4]. name= = "Button2") 

{ 

Alert ('Second Form name: '+document.forms[l].name); 



Alert('No. of form elements of + document.forms[l].name+ 
'='+v); 

} 
For(i=0;i<v;i++) 

Alert(forml.element[i].name+' is at position' +i); 

} 
</script> 

</head> 

<body> 

<form name = "B.E Forml"> 

First Form:<i><b>B.E Forml</b></i><br> 

First Name:<input type = text Name= "textl"value= " "><br> 

<input type = "radio" name = "radio 1" value = " ">First year 

<input type= "radio" name= "radio2" value = " ">2 nd year. 

<input type = "radio" name = "raido3" value= " ">3 rd year 

<input type = "radio" name = "raido4" value= " ">4 th year 

<input type = "button" name = buttonl "value = "clickl" 

onclick = "ver(form)"> 

</form> 

<form name = "BCA Form2"> 

Second form:<i><b>BCA Form2 </b></i> 

<br> 

First Name:<input type = text name= "text2" value= " "><br> 

<input type = "radio" name = "radio5" value = " ">First year 

<input type= "radio" name= "radio6" value = " ">2 nd year. 

<input type = "radio" name = "radio7" value= " ">3 rd year 

<br> 

<input type = "button" name = "button2" value = "click2" 

onClick = "ver(form)"> 

</form> 



</body> 
</html> 

2. Illustrate the use of a form object's element array. The state 
of a radio button and a checkbox on the HTML form can be 
programmatically changed using event based Java Script, (i) 
When the Java Script program runs an Alert draws attention to 
the checkbox, 'Checked property has been set to true via 
JavaScript code. 

(ii) On clicking on the first Alert's ok button, another Alert 
pops up that displays a message indicating that radio button is 
checked when the same button was clicked. 



(i) 



Name: 








Address 








Email ID 





O male O Female 
r^TI Employed 



A 


The checkbox 
checked 


just get 


OK 





Click 



(ii) 



Name: 








Address 








Email ID 





© male O Female 
I I Employed 



A The radio button 
/ !\ just get checked 




OK 











Click 



<html> 

<head> 

<title> Forms </title> 

<script Language = "Java Script"> 

Function chk(fl) 

{ 

Fl .check, checked = true; 

Alert("The checkbox just got checked"); 

Fl. check, checked = false; 

Fl .radio [0]. checked = true; 

F 1. radio [1]. checked = false; 

Alert ("The Radio button just got checked"); 

} 
</script> 

</head> 

<body> 

<form> 

Name: <input type =text name= "text" value = " " <br> 

Address :<input type = text Name= "textl" value = " "<br> 

E-mail id<input type = text Name = "text2" value = " " <br> 



<input type = "radio" Name = "radio 1" value = " "> Male 

<input type = "radio" Name = "radio2" value = " "> Female 

<br><br> 

<input type = "checkbox" Name = "check" value = " "> 

Employed <br> 

<input type = "button" Name = "Bt" value = "Click" OnClick = 

"Chk(form)"> 

</form> 

</body> 

</html> 





















Firest Name: 
Address 
Pin code 


Jayaram 


Last Name: 


Sapkota 












lth-5 








00977 




















y 
A All text box are filled U1 - 
/i\ Thank \"">n 






Verify 




















OK 























(3) Create a HTML form that has a no of text boxes. When the 
form runs, browser fills the textboxes with data. Write Java 
Script code that verifies that all textboxes have been filled. 
If a textbox has been left empty, popup an Alert indicating 
which textboxes has been left empty. When the Alert's Ok 
button is clicked on, set focus to that specific textbox. If all 
the textboxes are filled, display a thank you alert. 



Firest Name: 



Address 



Pin code 



Jayaram 



Last Name: 



Sapkota 



Verify 



A 



y 



Please fill the following 
i\ textboxes/: textbox: address, 
pin c ode 



OK 



Code: 

<html> 

<head> 

<script Language = "Java Script"> 

Function verifyData( ) 

{ 

a=0;r = " "; 

for (i=0; i<=4;i++) 

{ 

If (document.forms[0].elements[i].value = = " ") 

{ 
a=l; 

r = r+ " " + document.forms[0].elements[i].name+ " "; 

} 

Elseif((i>3)&&(a= = 0)) 

{ 

Alert ("All text boxes are filled in - Thank you"); 

} 



} 

For (i=0; i<=4; i++) 

{ 

If (document. Forms[0]. Elements [i]. value = = " ") 

{ 

Alert ("Please fill in the following Textbox/boxes:-" +r); 

Document.forms[0].elements[i].focus( ); 

Break; 

} 

} 

} 
</script> 

</head> 

<body> 

<form> 

First Name: <input type= "text" Name = "First name" size = 

20> 

Last Name: <input type= "text" Name = "Lastname" size = 

20><p> 

Address: <input type= "text" Name = "pincode" size=6><p> 

<input type= "button" Name = "act" Value = "Verify" OnClick 

= "VerifyData( )"> 

</form> 

</body> 

<script Language = "Java Script" > 

document.forms[0].firstname.focus( ); 

</script> 

</html> 



(4) Develop a HTML page, which accepts 

- any mathematical expression 

- Evaluate the expression. 

- Displays the results of the evaluation. 













Enter mathematical Expession: 






Calculate 














Result of this expression is: 















Code: 

<html> 

<head><title> Calculation </title><head> 
<Script language = "Javascript"> 
function calculate(form) 

{ 

form, results . value=eval(form. entry .value) ; 

} 

</script> </head> 

<body> 

<form> 

<p>Enter Mathematical Expression: 

<input type = "text" Name= "Entery" value= " "> 

<input type = "button" value = "calculate" 

OnClick = "Calculate(this.form);"> 

<br> 

The result of the expression is : 

<input type = "text" Name = "results" 

onFocus= "this.blur( ):"> 

</from> 



</body> 
</html> 



(5) Create a form having textboxes radio buttons , checkbox 
and a reset button as shown in fig (i) on clicking the reset 
button , the entire form is reset and fig (ii) appears . 



Firest Name: 



Address 



© male Q Female 







B.E com 



p-n 



B.EEIx.&Com B.E Civil 



□ 



Reset 



Fig(l) 



Firest Name: 








Address 





O male O Female 



□ 



B.E com 



p-n 



B.E Elx.&Com 



□ 



B.E Civil 



Reset 



A The form element have been 
/ !\ cleared 




OK 











Fig(2) 



<html> 

<head><title>Reset button</title> 
<script language = "javaScript"> 
function func(fl) 

{ 

alert ("The form elements have been cleared"); 

} 
</script></head> 

<body> 

<form onReset = "func(this.form)"> 

Name:<input type = "text" Name: "text" value= " "><br> 

Address: :<input type = "text" Name: "textl" value= " "><br> 

<input type = "radio" Name= "radio" value = " ">Male 

<input type = "radio" Name= "radio 1" value = " ">Femal 

<br><input type = "checkbox" Name= "checkl" value = " 

">B.E Comp. 

<input type = "checkbox" Name= "check2" value = " ">B.E 

E&C. 

<input type = "checkbox" Name= "check3" value = " ">B.E 

civil 

<br><input type = "Reset" Name= "Reset" value = " Reset"> 

</form> 

</body> 

</html> 



(6) Develop a HTML page, which uses two text fields and a 
checkbox. The first text object accepts a numerical value. 
Depending on the checked or unchecked state of the 
checkbox, the second text object displays. 
Checkbox is not checked: Double the numeric value entered 
Checkbox is checked: The square of the numeric value entered. 
If the second text object is loaded with a numeric value 
depending on the checked or unchecked state of the checkbox, 
the first text object displays. 
Checkbox is not checked: Half the numeric value entered. 
Checkbox is checked: The square root of numeric value 
entered. 














Value: 


6 












Action (d 


sfault-double): 


Square 




Reslult: 


36 

















<html> 

<head><title> </title> 

<script Language = "Java Script"> 
Function calculate (form, callingField) 

{ 

If (callingFiled = = "result") 

{ 

If(form. square, checked) 

{ 

Form, entry, value = math. sqrt(form.resut. value); 

} 



Else 

{ 

Form, entry, value = form.result. value/2; 

} 
} 
Else 

{ 

If (form.square. checked) 

{ 

form.result. value = form.entry.value*form.entry. value; 

} 
Else 

{ 

Form.result.value = form.entry.value*2; 

} 

} 

} 
</script> 

</head> 

<body> 

<form> 

<center><br> 

Value: <input type= "text" Name= "entry" Value =0 OnChange 

= "Calculate (this.form, this.form);"> <br> 

<b> Action </b> (default -Double): 

<input type = " Checkbox" Name = "Square" OnClick = 

"Calculate (this.form, this.form);"> 

Square<br> 

<b> Result:</b> 



<input type = "text" name= "result" value=0 OnChange= 

"Calculate(this.form, this.form);"> 

</center> 

</form> 

</body> 

</html> 



(7) An HTML form displays tow text boxes and two radio 
buttons. The first text box accepts a numeric value. If the 
first radio button if active, double the no entered in the first 
text field will be displayed in the second text field. If the 
second radio button is active the square of the no entered in 
the first field will be displayed in the second text field. 









Value: 


3 




Action: 

o 
o 


Double 
Square 






Reslult: 


6 













<html> 

<head> <title> </title> 

<script Language = "javascript"> 
Funciton calculate (form) 

{ 

If (form, elements [ 1 ] . checked) 

{ 



Form.result. value = form.entry.value*form.entry. value; 

} 
Else 

{ 

Form.result.value = form.entry.value*2; 

} 

} 
</script> 

</head> 

<body> 

<form> 

<b> Value:</b> 

<input type = "text" name = "entry" value = 0"> 

<br> 

<b> Action: </b> 

<br> <input type = "radio" name = "actionl" value = "twice" 

OnClick = "calculate (this.form);">Double<br> 

<input type = "radio name = actionl" value = "square" OnClick 

= "Calculate (this. form) ;"> Square<br> 

<b> Result: </b> 

<input type = "text" name = "result" OnFocus = "this.blur( 

);"> 

</form> 
</body> 
</html> 

(8) The form consists of two multiple choice lists and one 
single choice list. 

- The first Multiple choice list displays the major dishes 
available. 



- The second Multiple choice list displays the starters 
available. 

- The second Multiple choice list displays the starter 
available. 

- The single choice list displays the miscellaneous (soft 
drinks, milk snakes, coffee etc.) available. 

The selected items form all the lists should be captured and 
displayed in a text area along with their respective costs. On 
Clicking the 'Total cost' button, the total cost of all the 
selected items is calculated and displayed at the end in the 
text area. A 'Clear' button is provided to clear the text area. 



Output: - 



|: «^_,^n^U^ 



File Edit View Favorites Tools Help 

B @] <& P 5 ™* ii *•**»* -0 0- & s - □ i 



Address ^\ D:\html program\java prograrn\Ch.aplO\ChaplO_Eg08.h 



a go 



|AVG ■ 



Search - [ $ Total Protection [ &| AVG Info - j Get More 



Select the Menu Items of your choice - 



Major dishes : 



Starrer: : 



Fish Fillets 
Chicken Burger 
|Veg. Burger 



French Fries 
Nuggets 
Hash Browns 
McAlooTikki 



The items selected form the Menu are 



welcome to EASCOLL Fast Food center 



'Checktheseoiit' v| 



Total Cost "| Clear | 



<HTML> 

<HEAD><TITLE>McDonalds</TITLE> 
<SCRIPT Language="JavaScript"> 
var m; 
function pick(Fl) 

{ 

var z=" "; 

forG=0;j<3;j++) 

{ 

for(i=0; i<Fl. elements [j]. length; i++) 

{ 



y=F 1 . elements [j ]. options [i] .value ; 



if (Fl .elements[j] [i]. selected) 

Var 

z=z + "\n" + y; 

F 1 . elements[3 ] . value=z; 



} 
m=z: 



} 

function cal(Fl) 



var d=0; 
for(j=0;j<3;j++) 



for(i=0; i<Fl. elements [j]. length; i++) 
if (Fl. elements [j][i]. selected) 



y=F 1 . elements [j ]. options [i] .value ; 



var 

s=new String(y); 

var a=s.indexOf(">"); 

var b=s.substring(a+l,a+3); 

c=parselnt(b); 

d=d+c; 



} 



} 

p="Total cost of the selected items-' + d; 

m=m + "\n" + p; 

F 1 . elements[3 ] . value=m; 



} 

function clr(Fl) 



Fl.elements[3].value=" " 



} 



</SCRIPT></HEAD> 
<BODY> 

<H2><CENTER> 

<FONT Color="Blue">welcome to EASCOLL 
Fast Food center </FONT> 

</CENTER></H2> 

<FORM Name="Fl">Select the Menu Items of your 
choice - <BR><BR> 

<TABLE><TR VAlign=Top><TD> 

Major dishes :<BR> 
<SELECT Name="sl" MULTIPLE onBlur="pick(this.form)"> 
<OPTION Value="Mc Burger->80" SELECTED> Mc Burger 
<OPTION Value="Fish Fillets->70"> Fish Fillets 
<OPTION Value-'Chicken Burger->60"> Chicken Burger 
<OPTION Value-' Veg. Burger->45"> Veg. Burger 

</SELECT><BR><BR> 
</TD><TD></TD><TD></TD><TD> 

Starters :<BR> 
<SELECT Name="s2" MULTIPLE onBlur="pick(this.form)"> 
<OPTION Value="French Fries->40"> French Fries 
<OPTIONValue="Nuggets->50">Nuggets 
<OPTION Value="Hash Browns->55">Hash Browns 
<OPTION Value="Mc Aloo Tikki->65">Mc Aloo Tikki 

</SELECT><BR><BR> 
</TD><TD></TD><TD></TD><TD> 

Miscellaneous :<BR> 

<SELECT Name="s3" onBlur="pick(this.form)"> 
<OPTION Value=" ">'Check these out' 
<OPTIONValue="Milkshakes->35">Milkshakes 
<OPTION Value="Soft drinks->20">Soft drinks 
<OPTION Value="Softy->25">Softy 



</SELECT><BR><BR> 

</TD><TD></TD><TD></TD></TR></TABLE><BR> 
<TABLE><TR VAlign=Top><TD> 

The items selected form the Menu are : 
<TEXTAREA Name="TAl" Rows=10 

Cols=5 0></TEXT ARE A><BR><BR> 

</TD><TD></TD><TD></TD><TD> 
<BR><Input Type="button" Value-' Total Cost" onClick="cal 
(this.form)"> 

<Input Type="button" Value="Clear" onClick="clr(this.form)"> 
</TD></TR></TABLE> 
</FORM></BODY> 
</HTML> 



Q. Arithmetic operations. 

<html> 

<head> <title> Arithmetic operations </title> 
<script Language = "Javascript"> 
function add(x,y) 

{ 

Var g = x+y 

Window, document. form[0]. elements [2]. value = g 

} 

Function subtract (x,y) 

{ 

Var g = x-y 

Window, document. form[0]. elements [2]. value =g 

} 

Function divide (x,y) 

{ 



Var g = x/y 
Window.document.form[0].element[2].value=g 

} 
</script> 

</head> 

<body> 

<b> Using the form </b> 

<br> <form> 

Enter 1 st no: <input type = "text"><br> 

Enter 2 nd no: <input type = "text"> <br> 

Result: <input type= "text"> 

<br> 

<input type = "button" value = "Add" OnClick = 

"add(parselnt.(window.document.form[0].element[0].value 

"element[l]" 

<input type = "button" value = "subtract" OnClick = 

"Subtract(window.document.form[0].element[0]. value, 

window, document, form [0] . element [ 1 ] .value)"> 

<input type = "button" value = "Divide" OnClick = 

"divide(window.document.form[0].element[0].value,window.d 

ocument.form[0].element[l].value)"> 

</form> 

</body> 

</html> 



<html> 

<head> <title>. 
<body> 
<script> 



.</title></head> 



Var i; 

For (i=l ; i<=0;i++) 

{ 

document . write("<br>' '+i) 

} 
</script> 

</body> 

</html> 

While loop: 

<body> 
<script> 
Var num = 1 
While (num<= 10) 

{ 

document, write(num) ; 

num++ 

} 
</script> 

</body> 



<body> 

<script> 

Var x,y,sum; 

x= prompt ("enter any no") 

y=propt("enter any no") 

sum= parselnt(x)+parselnt(y) 



document. write("Total sum =" +sum) 

</script> 

</body> 



DHTML: 

Work with JavaScript Style Sheet: 

JSSS support the styles provided by CSS and has the 
advantage of making these styles available as JavaScript 
properties. This advantage enables style properties to be 
created, read and updated via Javascript Script . 
<html> 
<head> 

<title> JSSS </title> 
<style type= "text/Javascript"> 
Document. tags. BODY.backgroundColor = 'Cyan'; 
Document.tags. HI. color = 'red'; 
Document.tags.H2.color= 'blue'; 
Document.tags.p. color = 'green'; 
</style> 
</head> 
<body> 

<H1> Welcome to Purwanchal University </Hl> 
<align = "left"> <H2>Introduction </H2> 
<p> This university was established in 2054. and is situated in 

Biratnagar 

</p> 

</body> 

</html> 



Without using JSS: 

<html> 
<head> 

<title> </title> 

<style type = <'text/CSS"> 

Body {background=color: 'Cyan';} 

HI {Color: 'red';} 

H2 {Color: 'blue';} 

P {color: 'green';} 

</style> 

<body> 

This is my try. 

</body> 

</html> 

Cookies: 



When a user request a page, an HTTP request is sent to the 
server. The request includes a header that defines several pieces 
of information. Cookie information is shared between client 
browser and a server using fields in the HTTP headers. When 
the user requests a page for the first time, a cookie can be stored 
in the browser by a set-cookie field includes the information to 
be stored in the cookie along with several optional pieces of 
information including an expiry date, path, and server 
information. 

Then, when the user requests a page in future, if a matching 
cookie is found among all the stored cookies, the browser sends 
a cookie field to the server in a request header. The header will 
contain the information stored in that cookie. 

Syntax: 

Set-Cookie: Name= Value; expires = date; path =path; Domain 
= domain; Secure. 



When a uer sends a request to the server and a web page is 
returned, the server forgets all about the user and the page that 
has been downloaded. If the user clicks ona link, the server 
doesn't have background information, and if user returns to the 
page at a later date, there is no information available to the 
server about the user's previous actions of the page. 

Browsers address this problem with cookies, which is a 
method of storing information locally in the browser and 
sending it t the server whenever the pages are requested by the 
user. 



Name = Value — > Specifies the name of the cookie. 

Expires = data — > Specifies the expiry date the cookie will no 

longer be stored by the client or sent to the server. Date format 

DD-MM-YY 

PATH = path — > Specifies the path portion of the URL for 

which the cookie is valid. 

DOMAIN = domain— » Specifies the domain portion of the 

URL for which the cookie is valid. 

SECURE — > Specifies that the cookie should be transmitted 

over a secure link. 



Q. While the user traverses from page to page, the information 
entered by the user in any page is stored in cookies at the client 
side and made available to the user whenever the user returns to 
any page previously visited. Write the code for it with the use 
of cookies. 

Solution: 

<html><head> 

<script> 

function newcookie(cookiename, value) 

{ 

document.cookie =cookiename+ " ="+value; 

} 

function getcookie(cookiename) 

{ 

Var cookiefound = false; 

Var start =0; 

Var end =0; 

Var Cstring = document.cookie; 

Var Clenght = 0; 

While (clength<=Cstring.lenght) 

{ 

start =Clength; 

end = start+cookie.name.lenght; 

If(Cstring.substring(Start,end)= =Cookiename) 

{ 



Cookiefound = true; 
break; 

} 
Clenght++; 

} 
If(cookiefound) 

{ 

start = end+1; 

end = document.cookie. indexOf(" ", start); 

If(end<start) 

{ 

end ^document. cookie. length; 

Var contents = document. cookie. substring(start,ends); 

return contents; 

} 
else 

{ 

Var contents = document.cookie. substring(start,end); 

return contents; 

} 
} 
} 
</script></head> 

<body> 

<script> 

Var this Cookie = ((document, cookie != = " ") && 

(document. Cookie ! =NULL)) ; 

Var (first_name = (thisCookie)?getCookie("first_name"): " "; 

Var Cmiddle_name = (thisCookie? Get 

Cookie("middle_name): " "; 



Var Clast_name = (thisCookie)? Get Cookie("last_name): " "; 

document . write( ' <form> ' ) ; 

document. write('<table width = 100% border = "0" cell 

padding = "4" cellSpacing = "4">); 

document.write("<tr>"); 

document.write('<td colspan =2><font color = white<b> 

Personal Details (<font color = red>*</font> 

Indicates required </b></td>); 

document . write( ' </tr> ' ) ; 

document . write( ' <tr> ' ) ; 

document.write('<td width = 25%>'); 

document.write('<td width =75%>&nbps <input type = text 

name= firstname value = " " +Cfirst_name+ " " size=20 

OnBlur = "newcookie(this.name,this.value);></td>') 

document . write( ' </tr> ' ) ; 

document . write( ' <tr> ' ) ; 

document.write('<tr width =25%> Middle Name </td>'); 

document.write('<td width =75%>&nbps <input type = text 

name= middle_name value = " " +Cmiddle_name+ " 

size=10 

OnBlur = "newcookie(this.name,this.value);"></td>') 

document . write( ' </tr> ' ) ; 

document . write( ' <tr> ' ) ; 

document.write('<td width = 25%>Last name </td>'); 

document.write('<td width =75%>&nbps <input type = text 

name= last_name value = " " +Clast_name+ " " size=20 

OnBlur = "newcookie(this.name,this.value);></td>') 

document . write( ' </tr> ' ) ; 

document . write( ' <tr> ' ) ; 



document. write('<br>'); 

document. write('<center>'); 

document. write ('<inpu type = Submit value = Done>'); 

document. write('<input type = reset value =Reset>'); 

document. write('</center>'); 

document. write('</form>'); 

</script> 

</body> 

</html> 

Using <DIV> </DIV>Tag. 

A web page can be divided into segments or division called 

DIVS. Each segments starts with <DIV> and ends with 

</DIV>. These segments can be positioned anywhere on the 

page. The <DIV> tag has a 'position' attribute that can be one 

of the two values, Absolute or Relative. Absolute positions the 

segment with respect to the top/left edge of the browser 

window. Absolute relative positions the segment in relation to 

other elements on the page. 

Eg. 
< 

<html> 

<head> 

<title> Workign with DIVS </title> 

</head> 

<body> 

<DIV ID = boxl style = "background-color.red;position; 

absolute; left:300; top: 150; width: 50"> 

<Img src = images/image l.jpg> 

</DIV> 



<DIV ID = box2 style = "background-color:red' 

position:absolute; left:380; top: 150; width:50"> 

<img src = images/image l.jpg> 

</DIV> 

<DIV.ID = box3. style = "background-color: red, position: 

absolute, left:300; top: 190; width:50"> 

<img src = images/image l.ipg> 

</DIV> 

<DIV ID = box4 style = "background-color: red; 

position: absolute; left:380; top: 190; width:50"> 

<img src = images/image l.jpg> 

</DIV> 

</body> 

</html> 



1^1 L^ 



Layers: To segment a web page, there is another pair of 
DHTML tags, <Layers> </Layers>. These tags are designed to 
behave like a piece of transparent paper laid on top of a web 
page. Between <layer> </layer>, HTML elements ate inserted 
and the user is given precise control over the placement of these 
object. Each layers is provided with an ID and with attributes 
and values specify its appearance and position. 



Layer Attributes: 

ID/Name: - The name of the layers. 

Left and Top: - horizontal and vertical positions of the layers in 
pixels. 

Pagex and pagey:- horizontal and vertical positions of the 
layers relative to the document's window. 
Src: - pathname of a file. 

Z-index, above, below:- The stacking order of a layer. Only 
one valid at any given time. 
Width:- Widht of layer's dispay. 
Height:- height of layer's display. 
Clip:- Viewable area of a layer. 
Visibility:- Whether a layer is visible or not. 
Bgcolor:- background color to be used by the layer. 
Background:- image to be used as the background for the layer. 

Layers Method: 

CaptureEvents:- Allows the layer to capture all events of the 

specified type. 

HandleEvents:- Invokes the event handler for the specified 

event. 

MoreAbove:- Moves the layer below the identified layer. 

MoveBy(x,y):- Moves the layer by the specified x and y pixel 

increments. 

MoveTo(x,y): Moves the layer to the specified position within 

the container. 

ReleaseEvents: Ends the capturing of the specified event type. 



Layers Event handlers: 

OnMouseOver- Event handler to use when the mouse enter or 
OnMouseOut:- eaves the la y ers - 

Onfocus:- Event handler to use when the layer receives or 
OnBlur:- loses keyboard focus. 

OnLoad:- Event handler to use when the layer is first loaded. 



Eg. 
<html> 

<head><title> </title></head> 

<body> 

<Layer id = boxl left=150 Top=150> 

<img src=imgl.jpg height =100 width=170>B.E 

computer</layer> 

<Layer id = box2 Left =50 Top=200> 

<img src = image2.jpg height=100 width = 140>B.E elx & com 

</layer> 

<layer id = box3 left =250 Top=50> 

<img src=img3.jpg height=100 width= 170>B.E Civil </layer> 

<hl> Welcome to purbachal Univeristy. 

<hr> 

The programs offered by this University are shown below: 

</body> 

</html> 



Welcome to purbanchal university 
The program offered by this University are shown below. 






B.E Civil 



B.E comp. 



B.E Elx.&Com 



In the above output the second layer is on top of the first layer. 
The stacking order of a layer is controlled by its z-index 
attribute. 

Eg. 

<layer id = boxl left =150 Top =150 Zindex = 2> 

<img src= imagel.jpg height= 100 width = 170> B.E comp. 

</layer> 

<layer id = box2 left =50 Top =200 Zindex = 1> 

<img src= image2.jpg height= 100 width = 140> B.E elx & 

com. </layer> 

<layer id = box3 left =250 Top =100 Z-index = 3> 

<img src= image3.jpg height= 100 width = 200> B.E civil. 

</layer> 



O/p 



Welcome to purbanchal university 
The program offered by this University are shown below. 




B.E Civil 



B.E comp. 



B.E Elx.&Com 



Inflow layers: To create a layer that occurs in its natural place 

in a document, an inflow layer with the <Ilayer> </Ilayer> 

tag is used. This creates a layer that is positioned relatively in 
the document. The layer can be placed into position by using 
left and Top attributes. 

Eg. 

With out Layer: 

<html> 

<head> <title> </title></head> 

<body> 

<img src = imagel.jpg height =100 width=170>B.E comp. 

<img src = imgage2.jpg height =100 width= 140>B.E elx and 

Com. 

</body> 

</html> 




B.E comp. 




B.E Elx.& Com 



Use of ILayer: 

<html> 

<head><title>Inflow layer </title></head> 

<body> 

<Ilayer id = boxl Left =0 Top = 50> 

<img src = imagel.jpg height =100 width = 170> B.E Comp 

</Ilayer> 

<Ilayer id = box2 Left= 50 Top = 100> 

<img src = image2.jpg height=100 width =140> B.E elx & com 

</Ilayer> 

</body> 

</html> 




B.E comp. 




B.E Elx.& Com 



Chapter- 4 

Common Gateway Interface: 

The common gateway interface is a specification defined bya 
the world wide web consortium, defining how a program 
interacts with a hyper text transfer protocol server. CGI 
provides the middle ware between www servers and external 
database and information resources. 

How GCI is used within the HTML: 

CGI enabled web server is computer programs that can be 
created and deployed that can accept user i/p and create a web 
page. To create an interactive web page, HTML elements are 
used to display a form that accepts a client's i/p and passes this 
to special computer programs on the web server. This computer 
programs on the web server. This computer program process a 
client's i/p and return requested info, in the forms of a web page 
b the computer program. These programs are known as 
gateways because they act as a conduit between the web server 
and external resources of information. Gateway programs 
exchange info with the web server using a standard known as 
the common Gateway interface. 

CGI allows a www server to provide info to www clients that 
would otherwise not be available to those clients. 

Use of CGI: 

- Gathering user feedback about a product line through an 
HTML form. 

- Querying an (Oracle) database and rendering the result as 
an HTML document. 



Working Principle: 



Web 
Browser 



HTTP 



Web 
Server 



CGI 



CGI 
Program 



Document 
in file 
system 



Disk 
Files 



Data 
base 



As shown in fig. a web browser running on a client machine 
exchanges info with a web server using HTTP. The web server 
and the CGI program run on the same system. Depending on 
the browser's request, the webserver either provides a 
document from its own document directory or executes CGI 
program. 

The sequence of steps for creating a dynamic HTML is as 
follows. 

- A client makes on HTTP request by means of a URL. 

- From the URL, the web server determines that it should 
activate the gateway program listed in the URL and send 
any parameters passed via the URL to that program. 

- The gateway program processes the info and returns 
HTML text file to the web server. This server, in turns 
adds a MIME header and returns the HTML text to the 
web browser. 



- The web servers displays the document received from the 
web server. 

How info, is transferred from the web browser to a CGI 
program: 

The web browser uses the "method" attribute of the <form> tag 
to determine how to send the form's data to the web server. 
These are tow submission methods. 
l.GET. 
2. POST. 

GET: The web browser submits the form's data a part of a 
URL. The browser uses the HTTP GET Command to submit 
the data. If the form's data is set to the web server using GET 
command, the browser must include all data in the URL. 

The values of all the field are concatenated and passed to the 
URL specified in the action attribute of the <form> tag. Each 
field's values appear in the name-value format. Any characters 
with a special meaning in the form's data is encoded using a 
special encoding scheme, referred to as URL encoding. In this 
scheme a space is replaced by a pulse sign (+), fields are 
replaced by an ampersand (&) and any non-alphanumeric 
character is replaced by a % . . ..(hexadecimal) code. 

The post Method: 

In the post method of data submission, the web browser uses 
the POST command to submit the data to the server and 
includes the form's data in the body of that command. The post 
method can handle any amount of data, because the browser 



sends the data as a separate stream . The post method should be 
used to send potentially large amounts of data to the web 

server. 

How URL Interpretation with web server: 

The web server must be configured to recognize an HTTP 
request for a CGI program. Confirming the web server involves 
informing it to the directory where the CGI programs reside. 
The URL specifying a CGI program looks like any other URL, 
but the web server can examine the directory name and 
determining whether the URL is a normal document or a CGI 
program. 

The web server expects the CGI program's name to appear 
immediately following the CGI directory (eg. /cgi-bin/). A URL 
can also include additional path information, which can be used 
by the CGI program. This path info, needs to be included in the 
URL immediately following the CGI program name. 

How a CGI program returns Information to the server: 

The CGI program always returns info, to the server by writing 
to the standard o/p. If a CGI program wants to return an HTML 
document, the program must write that document to standard 
output. The web server than processes that o/p and sends that 
data back to the browser that had originally submitted the 
request. The CGI program adds appropriate header info, to its 
o/p and sends this to the web server. 

Processing form Information in a CGI program: 

When a form submits data via the GET method, the CGI 
program receives info, through the Query-string (URL-encoded 



search string) environment variable. If the form submits data 
via the post method , the CGI program receives info, through 
standard i/p. 

The steps for a CGI program designed to handle URL- 
encoded data sent through both GET and POST methods are: 

- Check the REQUEST-METHOD environment variable 
to determine whether the request is GET or POST. 

- If the method is GET, use the value of the QUERY- 
STRING environment variable as the input. 

- If the method is POST, get the length of the i/p from the 
CONTENT-LENGTH environment variable. 

- Extract the name-value pairs for various fields by a 
splitting the i/p data at the ampersand (&) character, 
which separates the values of fields. 

- In each name-value pair , convert all + signs to spaces. 

- In each name-value pair convert all %XX sequences to 
ASCII characters. 

- Save the name_value pairs denoting values of specific 
fields for later use. 



interpreter executes perl script, that makes it easy to write and 
test perl scripts. 



Q. What is a CGI Program? 

- A CGI program is a computer program that is started by the 
web server in response to an HTTP request. It is used to process 
HTML form i/p form a web server. 



Q. Why perl for GGI? 

- A perl is suitated for CGI because perl programs are easy to 
learn and write. Perl has great text-processing capabilities. Perl 
is a scripting languages, so it does not need to be compited. An 



